<template>
	<view class="setPayPw2">
		<view class="text-center mb30">{{tipsText}}</view>
		<view @tap="showKB">
			<tui-keyboard-input :inputvalue="valArr"></tui-keyboard-input>
		</view>
		<tui-keyboard :show="keyboardShow" :radius="true" @click="keyboardClick" @complete="handelComplete" @close="handalClose">
			<view class="tui-digital-box">
				<view class="tui-keyboard-tips">请输入支付密码</view>
			</view>
		</tui-keyboard>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyboardShow: false,  //是否展示键盘
			valArr: ['', '', '', '', '', ''],  //密码输入框中初始内容
			oldPwd:'',  //原密码
			newPwd1:'', //第一次密码
			newPwd2:'', //再次密码
			tipsText: '请输入原支付密码，以验证身份',
		}
	},
	methods:{
		//展示出键盘
		showKB(){
			this.keyboardShow = true
		},
		// 监听键盘数字输入
		keyboardClick(e) {
			this.valArr = e;  //实时判断输入了多少数字
		},
		//关闭键盘
		handalClose() {
			this.keyboardShow = false;
			this.valArr = ['', '', '', '', '', '']  //清空此时已经输入的内容
		},
		// 监听键盘完成指定长度数字输入
		handelComplete(e) {
			if(!this.oldPwd){
				this.oldPwd = e.join('');  //拼接成无间隔的字符串
				this.tipsText = '请输入您要设置的密码'  //更改提示内容
			}else{
				if(!this.newPwd1){
					this.newPwd1 = e.join('');
					this.tipsText = '请再次输入，以确认您要设置的密码'
				}else{
					this.newPwd2 = e.join('');
					//  两次密码不一致
					if(this.newPwd1 !== this.newPwd2){
						this.$tip.toast('两次输入密码不一致');
						this.handalClose();
						this.newPwd1 = '';
						this.newPwd2 = '';
						this.tipsText = '请输入您要设置的密码'
					}else{
						// 发送请求
						this.request()
					}
				}
			}
			this.handalClose()  //输入完关闭键盘
		},
		// 请求
		request(){
			this.$http.post('/api/auth/business/pwd/editPayPwd', {account: this.$store.state.userInfo.busiAccount, payPwd: this.oldPwd, newPayPwd: this.newPwd2}).then(res => {
				if(res.success){
					uni.showToast({
					    title: '修改成功',
					    duration: 1000,
						icon: 'success'
					});
					setTimeout(() => {
						uni.navigateBack({delta:1})
					},1000)
				}else{
					this.$tip.toast(res.msg);
					this.oldPwd = this.newPwd1 = this.newPwd2 = '';
					this.tipsText = '请重新输入原支付密码，以验证身份'
				}
			});
		},
	}
}
</script>

<style scoped lang="scss">
page {
	background-color: #fff;
}

.setPayPw2 {
	font-size: 30rpx;
	padding: 60rpx 28rpx 0;
}
.mb30 {
	margin-bottom: 30rpx;
}
.tip {
	margin: 20rpx 0 60rpx;
}
.tui-keyboard-tips {
	width: 100%;
	height: 120rpx;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	background: #fff;
	position: relative;
	color: #333;
	border: 0;
}
//修改成功弹出框
 .finish-modal{
	 .icon{
		position: absolute;
		right: 60rpx;
		top: 40rpx;
	 }
 }
.feedback-finish {
	padding-top: 60rpx;
	font-size: 30rpx;
}
image {
	width: 130rpx;
	height: 130rpx;
	margin-bottom: 30rpx;
}
.thanks {
	margin-bottom: 98rpx;
}
</style>

